<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/basic/baseinfo.js?v=1}"></script>
<body>
<div id="app" v-cloak>
	  <el-container>
	    <el-aside width="150px" >
	    	<el-tree :default-expanded-keys="[1,24]" :data="data" ref="tree" highlight-current check-on-click-node :props="defaultProps" node-key="id" @node-click="handleTreeCheckChange"></el-tree>
	    </el-aside>
    	<el-container>
		    <el-header height="45px" class="inner_header">
		    	<el-form ref="form" :model="queryData" label-width="50px" label-position="left">
			    	<el-row :gutter="20">
					  <el-col :span="6">
					  		<el-form-item label="名称">
						  		<el-input  placeholder="请输入名称" size="mini" v-model="queryData.itemName" clearable>
								</el-input>
							</el-form-item>
					  </el-col>
					  <el-col :span="6">
					  		<el-form-item label="编码">
						  		<el-input placeholder="请输入编码" size="mini" v-model="queryData.itemCode" clearable>
								</el-input>
							</el-form-item>
					  </el-col>
					  <el-col :span="12">
					  	<el-form-item>
					  		<el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
				  			<el-button size="mini" icon="el-icon-plus" @click="addItem">增加</el-button>
				  		</el-form-item>
					  </el-col>
					</el-row>
		    	</el-form>
		    </el-header>
		    <el-main class="inner_main">
		    	<div>
		    	  <el-table  
		    	    ref="baseinfoDatagrid" 
		    	    :data="datagrid"
				    style="width: 100%;"
				    stripe
				    >
				    <el-table-column type="index" label="序号" width="50"></el-table-column>
				    <el-table-column prop="itemName" label="名称" width="100"> </el-table-column>
				    <el-table-column prop="itemCode" label="编码" width="80"> </el-table-column>
				    <el-table-column prop="itemCodeCopy" label="辅助参数" width="80"> </el-table-column>
				    <el-table-column prop="parentName" label="父类名称" width="100"> </el-table-column>
				    <el-table-column prop="parentCode" label="父类编码" width="80"> </el-table-column>
				    <el-table-column prop="orderNum" label="序号" width="100"> </el-table-column>
				    <el-table-column  label="操作" fixed="right">
				    	<template slot-scope="scope">
				    		<el-button type="primary" size="mini" @click="editItem(scope.row)">编辑</el-button>
							<el-button type="danger" size="mini"  @click="deleteItem(scope.row)">删除</el-button>
					      </template>
				    </el-table-column>
				  </el-table>
				</div>
				<div class="pagination_wrap">
				    <el-pagination
				      :current-page="queryData.page"
				      :page-sizes="[10, 20, 40, 100]"
				      :page-size="queryData.rows"
				      :layout="pagination_layout"
				      :total="totalNum"
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      @prev-click="handlePrevClick"
				      @next-click="handleNextClick">
				    </el-pagination>
				 </div>
		    </el-main>
	     </el-container>
	  </el-container>
	  <el-dialog :visible.sync="dialogConfig.dialogFormVisible" :top="10" :close-on-click-modal="false" :show-close="false">
		  <el-form :model="addData" ref="dialogForm" :rules="rules">
		    <el-form-item label="父节点" :label-width="dialogConfig.formLabelWidth" prop="parentCode"
		    	:rules="[{ required: true, message: '请选择父节点', trigger: 'blur' }, ]">
		      <el-cascader :options="data" v-model="cascaderValue" :disabled="isEdit" :show-all-levels="false" clearable change-on-select :props="defaultProps" @change="cascaderChange"></el-cascader>
		    </el-form-item>
	      	<el-form-item label="名称" prop="itemName" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.itemName"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="序号" prop="orderNum" 
	      		:label-width="dialogConfig.formLabelWidth">
		    	<el-input-number v-model="addData.orderNum" :min="1" :max="100" label="序号"></el-input-number>
		    </el-form-item>
	      	<el-form-item label="辅助参数" prop="itemCodeCopy" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.itemCodeCopy" auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="备注" prop="remark" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.remark" auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="resetForm('dialogForm')">取 消</el-button>
		    <el-button type="primary" @click="submitForm('dialogForm')">确 定</el-button>
		  </div>
	 </el-dialog>
</div>
</body>
</html>